import React from 'react';
import { connect } from 'dva';
import { Card, Row, Col } from 'antd';
/**
 * 	
 * PortfolioAssets 组合资产
 * 子组件
 * PortfolioAssetsList 	组合资产统计表
 * PortfolioAssetsCharts  组合资产图表
 */



import { IECharts } from '../../../components';
const PortfolioAssetsCharts = ({
    fieldList = [],
    list = [],
    colors = ['#85AED6', '#E9C87A', 'purple']
}) => {
    const data = []
    list.map(item => {
        data.push({
            name: item.name,
            value: item[fieldList.find(it => it.name === "期末金额/亿").id]
        })
        
    })

    data.shift()
    

    const myProps = {
        option: {
            color: colors,
            title:{
                // text:'组合资产',
                text:`${list.find(item=>item.name==='总资产').lastMoney}亿`,
                subtext: '组合资产规模',
                // top:'center',
                top:'30%',
                left:'center',
                textStyle :{
                    // fontSize:16,
                    fontSize:18,
                    color:'#4a4a4a'
                },
                subtextStyle: {
                    color: '#505050',
                    fontSize: 12,
                }
            },

            tooltip: {
                trigger: 'item',
                formatter: "{b}: {d}%"
            },

            series: [
                {
                    name: '组合资产规模',
                    type: 'pie',
                    radius: ['60%', '80%'],
                    avoidLabelOverlap: false,
                    hoverAnimation: false,
                    label: {
                        normal: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            show: false,
                            textStyle: {
                                fontSize: '14',
                                fontWeight: 'bold'
                            }
                        }
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data
                }
            ]
        }
    };
    return (
        <div style={{ height: 150 }}>
        <IECharts {...myProps} resizable={true} />
            
        </div>
    );

}

import TableList from '../../../components/TableList'
class PortfolioAssets extends React.Component {
    state = {
        data: this.props.portfolioAssets
    }
    componentDidMount() {
        this.fetchData(this.props)
    }
    componentWillReceiveProps(nextProps) {
        if ((nextProps.lPortId !== this.props.lPortId) || (nextProps.ratioBegindate !== this.props.ratioBegindate) || (nextProps.ratioEnddate !== this.props.ratioEnddate)) {
            this.fetchData(nextProps)
        }
        if (nextProps.portfolioAssets !== this.props.portfolioAssets) {
            if (nextProps.portfolioAssets.fieldList) {
            const jsq = nextProps.portfolioAssets.fieldList.find(item => item.name === "较上期/亿")

            // nextProps.portfolioAssets.list.map(item => {
            //     item[jsq.id] = (`${item[jsq.id]>0?'+':''}${item[jsq.id]}`)
            // })
            nextProps.portfolioAssets.list.map(item => {
                // item[jsq.id] = (`${item[jsq.id]>0?'+':''}${item[jsq.id]}`)
                if(item[jsq.id]<0){
                    item[jsq.id] = <span className="down">{item[jsq.id]}</span>
                }
                else if(item[jsq.id] === 0){
                    item[jsq.id] = <span style={{color:'#D0021B'}}>{item[jsq.id]}</span>
                }
                else{
                    item[jsq.id] = <span className="up">+{item[jsq.id]}</span>
                }
            })
        }
            this.setState({
                data: nextProps.portfolioAssets,
            })
        }
    }
    //fetchData  查询数据
    fetchData = (props) => {
        props.dispatch({
            type: 'combinatorialAnalysis/getPortfolioAssets',
            payload: props
        })
    }

    render() {
        const {list}=this.state.data
        return (
            <Card bordered={false} className="portfolioAssets">
                {
                    this.state.data.fieldList && (
                        <Row>
                            <Col xs={24} sm={24} md={12} lg={12} xl={12} style={{paddingRight:27}}>
                                <TableList {...this.state.data} />
                            </Col>
                            <Col xs={24} sm={24} md={12} lg={12} xl={12}>
                            {
                                list&&list.length?<PortfolioAssetsCharts {...this.state.data} />:null
                            }
                                
                            </Col>
                        </Row>
                    )
                }
            </Card>

        );
    }
}
PortfolioAssets.defaultProps = {
    IPortId: null,
    cBenchCode: null,
    ratioBegindate: null,//分类占比 开始时间
    ratioEnddate: null,//分类占比 结束时间
    portfolioAssets: {
        "fieldList": [
            {
                "id": "name",
                "name": "组合资产规模"
            },
            {
                "id": "firstMoney",
                "name": "期初金额/亿"
            },
            {
                "id": "lastMoney",
                "name": "期末金额/亿"
            },
            {
                "id": "increase",
                "name": "较上期/亿"
            }
        ],
        "list": [
            {
                "id": "1",
                "name": "总资产",
                "firstMoney": 1020,
                "lastMoney": 2340,
                "increase": 0.78
            }
        ]
    }
}
export default connect()(PortfolioAssets)